html,
body {
  height: 100%;
}
body {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  * {
    margin: 10px;
  }
}

.pagination {
  $size: 30px;
  $outline: 2px;
  $color: #333;
  $invertedColor: #eee;
  $h1: #0ff;
  $h2: #f00;

  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
  &__item {
    font-weight: bold;
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: $size;
    height: $size;
    width: $size;
    margin: 5px;
    padding: 0;
    user-select: none;
    &--button {
      position: relative;
      border: none;
      outline: none;
      cursor: pointer;
      &,
      &::before {
        transition: all 0.3s ease;
      }
      &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: $outline;
        background-color: $color;
        transform: scaleX(0);
      }
      &:hover::before {
        transform: scaleX(1);
      }
      &.active {
        background-color: $color;
        color: $invertedColor;
        box-shadow: $outline $outline 0 0 $h1,
          calc($outline * -1) calc($outline * -1) 0 0 $h2;
      }
      &.active:hover {
        box-shadow: calc($outline * -1) calc($outline * -1) 0 0 $h1,
          $outline $outline 0 0 $h2;
      }
    }
  }
}
